<template>
    <div class="d-flex">
        <div class="view">
            <draggable v-model="news" @start="drag=true" @end="drag=false">
                <div class="article" v-for="(article,index) in news" :key="index"
                     @click="current=article"
                     :class="{active:article==current}">
                    <div class="first" v-if="index==0">
                        <img :src="article.picurl">
                        <h5>{{article.title}}</h5>
                    </div>
                    <div class="item d-flex " v-if="index>=1">
                        <h5 class="flex-fill">{{article.title}}</h5>
                        <img :src="article.picurl">
                    </div>

                </div>
            </draggable>


            <div class="d-flex justify-content-center align-items-center text-secondary p-2" style="cursor: pointer"
                 @click="add()" v-if="news.length<5">
                <i class="fa fa-plus-circle" aria-hidden="true" style="font-size: 2rem"></i>
            </div>
        </div>
        <div class="edit ml-3 p-3 shadow-sm d-flex flex-fill border flex-column">
            <div class="flex-fill">
                <div class="form-group">
                    <label>标题</label>
                    <input type="text" class="form-control" v-model="current.title">
                </div>
                <image-single class="mt-3" :image.sync="current.picurl"></image-single>

                <div class="form-group">
                    <label>链接</label>
                    <input type="text" class="form-control" v-model="current.url">
                </div>
                <button class="btn btn-outline-danger btn-sm mt-2" type="button" @click.prevent="del()">删除图文消息</button>
            </div>
            <textarea name="contents" v-html="news" hidden></textarea>
        </div>
    </div>

</template>
<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        props: {
            newid: {default: 0}
        },
        data() {
            return {
                news: [],
                current: {}
            }
        },
        async mounted() {
            await this.get();
            this.initCurrent();

        },

        methods: {
            async get() {
                if (this.newid > 0) {
                    //获取图文
                    const response = await this.axios.get(`wechat/news/${this.newid}`);
                    this.news = response;
                }

            },
            add() {
                if (this.news.length < 5) {
                    this.news.push({title: '', description: '', picurl: '/attachments/20/09/1.jpeg', url: ''})
                } else {
                    this.$message.warning('最多5条图文消息');
                }
            },
            initCurrent() {
                //初始化显示第一条数据
                if (this.news.length) {
                    this.current = this.news[0];
                }
            },
            del() {
                this.$confirm('确认删除').then(_ => {
                    this.news.map((article, index) => {
                        if (article == this.current) {
                            this.news.splice(index, 1);
                            this.initCurrent();
                        }
                    });
                });
            },

        }

    }
</script>
<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
    }

    .view {
        width: 350px;
        border: 1px solid #e6e6e6;

        div {
            position: relative;

            &.article {
                border-bottom: 1px solid #dddddd;

                &:last-of-type {
                    border-bottom: none;
                }

                &.active {
                    outline: 3px solid #c82333;
                }
            }

            .first {
                img {
                    width: 100%;
                }

                h5 {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 5px 0;
                    background-color: rgba(0, 0, 0, .6);
                    color: white;
                    text-align: center;
                    font-size: 1.1rem;
                }
            }

            .item {
                padding: 10px;
                align-items: center;

                h5 {
                    font-size: 1rem;
                    color: #666666;
                }

                img {
                    width: 60px;
                    height: 60px;
                    margin-left: 10px;
                }
            }
        }
    }
</style>
